<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <link rel="icon" href="/resources/favicon.ico">
    <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/resources/css/public.css" media="all" />
    <link rel="stylesheet" href="/resources/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="/resources/layui_ext/dtree/font/dtreefont.css">
</head>
<body class="childrenBody">
<!-- 搜索条件开始 -->
<form class="layui-form" method="post" id="searchForm"style="margin-left: 200px;margin-top: 10px" shiro:hasPermission="role:view">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">角色名称:</label>
            <div class="layui-input-inline">
                <input type="text" name="name"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">角色备注:</label>
            <div class="layui-input-inline">
                <input type="text" name="remark"  autocomplete="off" class="layui-input">
            </div>
                <button type="button" lay-submit="" lay-filter="doSearch"
                        class="layui-btn layui-btn-normal layui-btn-radius layui-icon layui-icon-search"
                        id="doSearch"style="margin-left: 50px">查询
                </button>
                <button type="reset"
                        class="layui-btn layui-btn-warm layui-btn-radius layui-icon layui-icon-refresh">重置
                </button>
        </div>
    </div>
    
    
</form>
<!-- 搜索条件结束 -->


<!-- 数据表格开始 -->
<div style="margin-left:160px" shiro:hasPermission="role:view">
    <table class="layui-hide" id="roleTable" lay-filter="roleTable" lay-data="{id: 'roleTable'}"></table>
</div>
<!--表格工具条-->
<div style="display: none;" id="tableToolBar">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="add" shiro:hasPermission="role:create">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>
    
</div>
<!-- 行级工具条 -->
<div id="rowToolBar" style="display: none;">
    <a class="layui-btn layui-btn-xs" lay-event="edit" shiro:hasPermission="role:update">编辑</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="dispatchPermission" shiro:hasPermission="role:selectPermission">分配权限</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="role:delete">删除</a>
</div>
<!-- 数据表格结束 -->

<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv">
    <form class="layui-form" lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称:</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="text" name="name" lay-verify="required" placeholder="请输入角色名称" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色备注:</label>
            <div class="layui-input-block">
                <textarea name="remark" class="layui-textarea" placeholder="请输入角色备注"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否可用:</label>
            <div class="layui-input-block">
                <input type="radio" name="available" value="1" checked="checked" title="可用">
                <input type="radio" name="available" value="0" title="不可">
            </div>
        </div>
        <div class="layui-form-item" style="margin:10px 200px">
            <div class="layui-input-block">
                <button type="button"
                        class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-submit
                        lay-filter="doSubmit">提交
                </button>
                <button type="reset"
                        class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">重置
                </button>
            </div>
        </div>
    </form>

</div>
<!-- 添加和修改的弹出层结束 -->
<!-- 分配菜单的弹出层开始 -->
<div style="display: none;padding: 20px" id="dispatchPermissionDiv" >
    <ul id="permissionTree" class="dtree" data-id="0"></ul>
</div>
<!-- 分配菜单的弹出层结束 -->
<script src="/resources/layui/layui.js"></script>
<script type="text/javascript">
    var tableIns;
    var permissionTree;
    layui.extend({
        dtree:'/resources/layui_ext/dist/dtree'
    }).use([ 'jquery', 'layer', 'form','dtree','table'], function() {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var dtree=layui.dtree;
        var table = layui.table;

        //渲染数据表格
        tableIns = table.render({
            elem: '#roleTable', //渲染的目标对象
            url: '/sys/role/loadRole', //数据接口
            title: '角色数据表',//数据导出来的标题
            toolbar: "#tableToolBar", //表格的工具条
            defaultToolbar: ['filter', 'exports', 'print'],
            height: 'full-103',
            cellMinWidth: 100, //设置列的最小默认宽度
            width:996,
            done: function (res, curr, count) {
                if (res.data.length == 0 && curr != 1) {
                    tableIns.reload({
                        page: {
                            curr: curr - 1
                        }
                    })
                }
            },

            totalRow: false, //开启合并行
            page: true, //是否启用分页
            limit:9,
            text: {
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            },
            cols: [ [ //列表数据
                {field: 'id', title: 'ID', align: 'center', width: '50'},
                {field: 'name', title: '角色名称', align: 'center', width: '200'},
                {field: 'remark', title: '备注', align: 'center', width: '430'},
                {
                    field: 'available', title: '是否可用', align: 'center', width: '90',
                    templet: function (d) {
                        return d.available == '1' ? '<font color=blue>可用</font>' : '<font color=red>不可用</font>';
                    }
                },
                {field: 'right', title: '操作', toolbar: '#rowToolBar', width: '220', align: 'center'}
            ] ]
        });

        //模糊查询
        form.on("submit(doSearch)", function (data) {
            tableIns.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        });

        //监听头部工具栏事件
        table.on("toolbar(roleTable)",function(obj){
            switch(obj.event){
                case 'add':
                    openAddRole();
                    break;
            };
        })

        //监听行工具事件
        table.on('tool(roleTable)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'del'){ //删除
                deleteRole(data);
            } else if(layEvent === 'edit'){ //编辑
                openUpdateRole(data);
            }else if(layEvent==='dispatchPermission'){
                openDispatchPermission(data);
            }
        });
        var url;
        var mainIndex;
        //打开添加页面
        function openAddRole(){
            mainIndex = layer.open({
                type:1,
                title:'添加角色',
                content:$("#saveOrUpdateDiv"),
                area:['800px','350px'],
                success:function(index){
                    //清空修改页面使用过的表单数据
                    $("#dataFrm")[0].reset();
                    //为弹框中表单提交传递提交地址
                    url="/sys/role/addRole"
                }
            });
        }

        //打开修改页面
        function openUpdateRole(data){
            mainIndex=layer.open({
                type:1,
                title:'修改角色',
                content:$("#saveOrUpdateDiv"),
                area:['800px','350px'],
                success:function(index){
                    form.val("dataFrm",data);
                    url="/sys/role/updateRole";
                }
            });
        }

        //表单提交数据
        form.on("submit(doSubmit)",function(result){
            //序列化表单数据
            var formData=$("#dataFrm").serialize();
            $.post(url,formData,function(result){
                //弹出操作情况数据msg-->封装数据处理请求返回的信息
                var code = result.code;
                var msg = result.msg;
                if(code>0){
                    layer.close(mainIndex);
                    layer.alert(result.msg, {
                        icon: 1
                    });
                    tableIns.reload();
                }else{
                    layer.alert(result.msg, {
                        icon: 0
                    });
                }
            })


        })

        //删除单个菜单
        function deleteRole(data){
            var url = "/sys/role/deleteRole";
            layer.confirm('确认删除['+data.name+']角色吗？', function(index){
                $.post(url,data,function(result){
                    if(result.code>0){
                        layer.alert(result.msg,{
                            icon:1
                        });
                        tableIns.reload();
                    }else{
                        layer.alert(result.msg,{
                            icon:0
                        });
                    }
                });
            });
        }

        //打开分配菜单页面
        var permissionTree;
        function openDispatchPermission(data){
            mainIndex=layer.open({
                type:1,
                title:'分配权限',
                content:$("#dispatchPermissionDiv"),
                area:['400px','500px'],
                btnAlign:'c',
                btn:['<div class="layui-icon layui-icon-release">确认分配</div>',
                    '<div class="layui-icon layui-icon-close">取消分配</div>'],
                yes:function(index,layer){
                    dispatchPermission(data);
                },
                success:function(index){
                    // 初始化树
                    permissionTree = dtree.render({
                        elem: "#permissionTree",
                        dataStyle: "layuiStyle",  //使用layui风格的数据格式
                        icon:"2",
                        response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
                        dataFormat: "list",  //配置data的风格为list
                        url: "/sys/role/loadPermissionTreeJson?roleid="+data.id, // 使用url加载（可与data加载同时存在）
                        checkbar: true,
                        checkbarType: "all",// 默认就是all，其他的值为： no-all  p-casc   self  only
                        checkbarData:"change"
                    });

                }
            });
        }
        //提交分配权限,给角色分配权限,角色权限表
        function dispatchPermission(data){
            var node = dtree.getCheckbarNodesParam("permissionTree");
            var params = "roleid="+data.id;
            var permissionid;
            if(node !=null){
                $.each(node,function(i,e){
                    permissionid = e.nodeId;
                    //checked,1为选中,0为未选中
                    //全部是1,不选了就变为0,
                    //checkArr告知树,此节点选中
                    //checked标记树的选中状态,刚开始全部为1,此值不影响树的解析,只是标记作用,一旦改变为不选中,checked就变为0
                    if(e.checked=="0"){
                        //减少的
                        permissionid=-permissionid;
                    }
                    //增加的
                    params+="&permissionids="+permissionid;
                });
                $.post("/sys/role/dispatchRolePermission",params,function(result){
                    if(result.code>0){
                        layer.close(mainIndex);
                        layer.alert(result.msg,{
                            icon:1
                        });
                    }else{
                        layer.alert(result.msg,{
                            icon:0
                        });
                    }
                })
            }else{
                layer.close(mainIndex);
                layer.alert(result.msg,{
                    icon:1
                });
            }

        }

    });

</script>

</body>
</html>